<template>
  <div ref="basicMapbox" class="myMap">
    <!-- <div class="elements"></div> -->
    <!-- <div class="elementsLeft"></div> -->
    <!-- <div class="elementsRight"></div> -->
    <!-- <div class="elementsBottom"></div> -->

  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, watch } from "vue"
import 'mapbox-gl/dist/mapbox-gl.css';
import mapboxgl from 'mapbox-gl';
import MapboxLanguage from '@mapbox/mapbox-gl-language';
import testJson from "./test.json"
import { useMainStore } from '../../../../store/index'
const store = useMainStore()

const showPoint = ref(false)

mapboxgl.accessToken = 'pk.eyJ1IjoieGlhb3NoaWhkIiwiYSI6ImNrNngzYnRhdzBqNm0zZnJ4eWZjdndrYzkifQ.qQjf8zANr9PsMpwq2NsRWQ';

let map: any

const basicMapbox = ref()

const init = () => {
  mapboxgl.accessToken = 'pk.eyJ1IjoieGlhb3NoaWhkIiwiYSI6ImNrNngzYnRhdzBqNm0zZnJ4eWZjdndrYzkifQ.qQjf8zANr9PsMpwq2NsRWQ';
  map = new mapboxgl.Map({
    container: basicMapbox.value,
    style: 'mapbox://styles/mapbox/satellite-streets-v12',
    center: [119.58899672911701, 28.164751829611674],
    zoom: 7.8, // starting zoom
    minZoom: 7.8,
    // maxBounds: [
    //   [118.60942030780944, 27.408347000802195], // Southwest coordinates
    //   [120.94727105532957, 28.79702833028658] // Northeast coordinates
    // ]
  })

  // 汉化
  map.addControl(new MapboxLanguage({ defaultLanguage: 'zh-Hans' }));

  map.on('load', function () {
    addData()
    addLayer()
  })

  map.on('click', 'pointId', function (e) {
    store.showModelB = true
  })
}

const addData = () => {
  map.addSource('testID', {
    type: 'geojson',
    data: testJson
  })

  map.addSource('pointId', {
    type: 'geojson',
    data: {
      type: 'FeatureCollection',
      features: [
        // {
        //   type: 'Feature',
        //   // coordinates是中心点位
        //   geometry: { type: 'Point', coordinates: [120.376702, 28.41158] },
        // }
      ]
    }
  })
}

const addLayer = () => {
  map.addLayer({
    id: 'testID',
    // 'type': 'fill',
    'type': 'line',
    source: 'testID',
    // paint: {
    //   'fill-color': '#BBFFFF',
    //   'fill-opacity': 0.9
    // }
    paint: {
      'line-color': '#18BDF7',
      'line-width': 4
    }
  })

  map.addLayer({
    id: 'pointId',
    type: 'circle',
    source: 'pointId',
    'layout': {
      'visibility': 'visible'
    },
    paint: {
      'circle-radius': 12,
      'circle-color': 'red'
    }
  })
}


watch(() => store.testArray, (newValue) => {
  map.getSource('pointId').setData({
    type: 'FeatureCollection',
    features: newValue
  })
})

onMounted(() => {
  init()
})
</script>

<style lang="scss" scoped>
.myMap {
  width: 100%;
  height: 100%;
  position: relative;

  .elements {
    position: absolute;
    z-index: 97;
    height: 50px;
    width: 100%;
    // background-color:rgb(128, 128, 128,.9);
    // background: rgba(255, 255, 255, .7);
    // -webkit-backdrop-filter: blur(10px);
    // backdrop-filter: blur(10px);
    background-color: rgba(238, 235, 235, 0.5);
    filter: blur(10px);
  }

  .elementsLeft {
    position: absolute;
    z-index: 97;
    width: 50px;
    height: 100%;
    // background: rgba(255, 255, 255, .3);
    // background-color: rgb(10, 10, 10,.5);
    background-color: rgba(238, 235, 235, 0.5);
    filter: blur(10px);
    // -webkit-backdrop-filter: blur(10px);
    // backdrop-filter: blur(10px);
    left: 0;
  }

  .elementsRight {
    position: absolute;
    z-index: 97;
    width: 50px;
    height: 100%;
    // background: rgba(255, 255, 255, .7);
    // -webkit-backdrop-filter: blur(10px);
    // backdrop-filter: blur(10px);
    background-color: rgba(238, 235, 235, 0.5);
    filter: blur(10px);
    right: 0;
  }

  .elementsBottom {
    position: absolute;
    z-index: 97;
    width: 100%;
    height: 50px;
    background: rgba(39, 39, 39, 0.7);
    // -webkit-backdrop-filter: blur(10px);
    // backdrop-filter: blur(10px);
    // background-color: rgba(238, 235, 235, 0.5);
    filter: blur(10px);
    bottom: 0;
  }
}


.mapboxgl-ctrl-bottom-left,
.mapboxgl-ctrl-bottom-right {
  display: none;
}

:deep(.mapboxgl-ctrl-logo) {
  display: none;
}

:deep(.mapboxgl-ctrl-attrib-inner) {
  display: none;
}

:deep(.mapboxgl-ctrl-attrib.mapboxgl-compact .mapboxgl-ctrl-attrib-button,
  .mapboxgl-ctrl-attrib.mapboxgl-compact-show .mapboxgl-ctrl-attrib-inner) {
  display: none !important;
}

:deep(.mapboxgl-ctrl-attrib.mapboxgl-compact) {
  display: none;
}

.mapboxgl-ctrl-icon {
  box-sizing: border-box;
}
</style>